Kategorizacija napak React Error Boundary: Celovit vodnik

Obravnavanje napak je kritičen vidik pri gradnji robustnih in vzdržljivih React aplikacij. Medtem ko React Error Boundaries zagotavljajo mehanizem za graciozno obravnavanje napak, ki se pojavijo med upodabljanjem, je razumevanje, kako kategorizirati in se odzvati na različne vrste napak, ključno za ustvarjanje resnično odporne aplikacije. Ta vodnik raziskuje različne pristope k kategorizaciji napak znotraj Error Boundaries in ponuja praktične primere in uporabne vpoglede za izboljšanje vaše strategije upravljanja napak.

Kaj so React Error Boundaries?

Predstavljeni v React 16, Error Boundaries so React komponente, ki ujamejo JavaScript napake kjerkoli v drevesu njihovih otroških komponent, beležijo te napake in prikažejo rezervni uporabniški vmesnik namesto, da bi se celotno drevo komponent zrušilo. Delujejo podobno kot blok try...catch, vendar za komponente.

Ključne značilnosti Error Boundaries:

• Obravnavanje napak na ravni komponente: Izolirajo napake znotraj specifičnih poddreves komponent.
• Graciozna degradacija: Preprečijo, da bi se celotna aplikacija zrušila zaradi ene same napake komponente.
• Kontrolirani rezervni uporabniški vmesnik: Prikažejo uporabniku prijazno sporočilo ali alternativno vsebino, ko se pojavi napaka.
• Beleženje napak: Olajšajo sledenje napakam in odpravljanje napak z beleženjem informacij o napakah.

Zakaj kategorizirati napake v Error Boundaries?

Samo ujeti napake ni dovolj. Učinkovito obravnavanje napak zahteva razumevanje, kaj je šlo narobe in ustrezno odzivanje. Kategoriziranje napak znotraj Error Boundaries ponuja številne prednosti:

• Ciljno usmerjeno obravnavanje napak: Različne vrste napak lahko zahtevajo različne odzive. Na primer, omrežna napaka lahko upravičuje mehanizem ponovnega poskusa, medtem ko lahko napaka pri preverjanju podatkov zahteva popravek uporabniškega vnosa.
• Izboljšana uporabniška izkušnja: Prikažite bolj informativna sporočila o napakah glede na vrsto napake. Splošno sporočilo "Nekaj je šlo narobe" je manj koristno kot specifično sporočilo, ki označuje omrežni problem ali neveljaven vnos.
• Izboljšano odpravljanje napak: Kategoriziranje napak zagotavlja dragocen kontekst za odpravljanje napak in prepoznavanje korenskega vzroka težav.
• Proaktivno spremljanje: Spremljajte pogostost različnih vrst napak, da prepoznate ponavljajoče se težave in določite prioriteto popravkov.
• Strateški rezervni uporabniški vmesnik: Prikažite različne rezervne uporabniške vmesnike, odvisno od napake, ter uporabniku zagotovite bolj ustrezne informacije ali dejanja.

Pristopi k kategorizaciji napak

Za kategoriziranje napak znotraj React Error Boundaries je mogoče uporabiti več tehnik:

1. Uporaba instanceof

Operator instanceof preverja, ali je objekt instanca določenega razreda. To je uporabno za kategoriziranje napak glede na njihove vgrajene ali prilagojene vrste napak.

Primer:

class NetworkError extends Error {
  constructor(message) {
    super(message);
    this.name = "NetworkError";
  }
}

class ValidationError extends Error {
  constructor(message) {
    super(message);
    this.name = "ValidationError";
  }
}

class MyErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null, errorInfo: null };
  }

  static getDerivedStateFromError(error) {
    // Posodobite stanje, tako da bo naslednje upodabljanje prikazalo rezervni uporabniški vmesnik.
    return { hasError: true, error: error };
  }

  componentDidCatch(error, errorInfo) {
    // Napako lahko prijavite tudi storitvi za poročanje o napakah
    console.error("Ujeta napaka:", error, errorInfo);
    this.setState({errorInfo: errorInfo});
  }

  render() {
    if (this.state.hasError) {
      // Lahko upodobite poljuben rezervni uporabniški vmesnik po meri
      let errorMessage = "Nekaj je šlo narobe.";
      if (this.state.error instanceof NetworkError) {
        errorMessage = "Pojavila se je omrežna napaka. Preverite svojo povezavo in poskusite znova.";
      } else if (this.state.error instanceof ValidationError) {
        errorMessage = "Pojavila se je napaka pri preverjanju. Preglejte svoj vnos.";
      }

      return (
        <div>
          <h2>Napaka!</h2>
          <p>{errorMessage}</p>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.error && this.state.error.toString()}<br />
            {this.state.errorInfo.componentStack}
          </details>
        </div>
      );
    }

    return this.props.children; 
  }
}

Pojasnilo:

• Določeni so razredi po meri NetworkError in ValidationError, ki razširjajo vgrajeni razred Error.
• V metodi render komponente MyErrorBoundary se operator instanceof uporablja za preverjanje vrste ujetih napak.
• Na podlagi vrste napake se v rezervnem uporabniškem vmesniku prikaže specifično sporočilo o napaki.

2. Uporaba kod napak ali lastnosti

Drugi pristop je vključitev kod napak ali lastnosti znotraj samega objekta napake. To omogoča bolj natančno kategorizacijo glede na specifične scenarije napak.

Primer:

function fetchData(url) {
  return new Promise((resolve, reject) => {
    fetch(url)
      .then(response => {
        if (!response.ok) {
          const error = new Error("Zahteva omrežja ni uspela");
          error.code = response.status; // Dodajte kodo napake po meri
          reject(error);
        }
        return response.json();
      })
      .then(data => resolve(data))
      .catch(error => reject(error));
  });
}

class MyErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null, errorInfo: null };
  }

  static getDerivedStateFromError(error) {
    // Posodobite stanje, tako da bo naslednje upodabljanje prikazalo rezervni uporabniški vmesnik.
    return { hasError: true, error: error };
  }

  componentDidCatch(error, errorInfo) {
    // Napako lahko prijavite tudi storitvi za poročanje o napakah
    console.error("Ujeta napaka:", error, errorInfo);
    this.setState({errorInfo: errorInfo});
  }

  render() {
    if (this.state.hasError) {
      let errorMessage = "Nekaj je šlo narobe.";
      if (this.state.error.code === 404) {
        errorMessage = "Vir ni najden.";
      } else if (this.state.error.code >= 500) {
        errorMessage = "Napaka strežnika. Poskusite znova kasneje.";
      }

      return (
        <div>
          <h2>Napaka!</h2>
          <p>{errorMessage}</p>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.error && this.state.error.toString()}<br />
            {this.state.errorInfo.componentStack}
          </details>
        </div>
      );
    }

    return this.props.children; 
  }
}

Pojasnilo:

• Funkcija fetchData doda lastnost code objektu napake, ki predstavlja kodo statusa HTTP.
• Komponenta MyErrorBoundary preveri lastnost code, da določi specifični scenarij napake.
• Različna sporočila o napakah se prikažejo na podlagi kode napake.

3. Uporaba centraliziranega preslikavanja napak

Za kompleksne aplikacije lahko ohranjanje centraliziranega preslikavanja napak izboljša organizacijo in vzdržljivost kode. To vključuje ustvarjanje slovarja ali objekta, ki preslikuje vrste napak ali kode v specifična sporočila o napakah in logiko obravnavanja.

Primer:

const errorMap = {
  "NETWORK_ERROR": {
    message: "Pojavila se je omrežna napaka. Preverite svojo povezavo.",
    retry: true,
  },
  "INVALID_INPUT": {
    message: "Neveljaven vnos. Preglejte svoje podatke.",
    retry: false,
  },
  404: {
    message: "Vir ni najden.",
    retry: false,
  },
  500: {
    message: "Napaka strežnika. Poskusite znova kasneje.",
    retry: true,
  },
  "DEFAULT": {
    message: "Nekaj je šlo narobe.",
    retry: false,
  },
};

function handleCustomError(errorType) {
    const errorDetails = errorMap[errorType] || errorMap["DEFAULT"];
    return errorDetails;
}

class MyErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, errorDetails: null, errorInfo: null };
  }

  static getDerivedStateFromError(error) {
    // Posodobite stanje, tako da bo naslednje upodabljanje prikazalo rezervni uporabniški vmesnik.
    const errorDetails = handleCustomError(error.message);
    return { hasError: true, errorDetails: errorDetails };
  }

  componentDidCatch(error, errorInfo) {
    // Napako lahko prijavite tudi storitvi za poročanje o napakah
    console.error("Ujeta napaka:", error, errorInfo);
    this.setState({errorInfo: errorInfo});
  }

  render() {
    if (this.state.hasError) {
      const { message } = this.state.errorDetails;
      return (
        <div>
          <h2>Napaka!</h2>
          <p>{message}</p>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.errorDetails.message}<br />
            {this.state.errorInfo.componentStack}
          </details>
        </div>
      );
    }

    return this.props.children;
  }
}

function MyComponent(){
    const [data, setData] = React.useState(null);

    React.useEffect(() => {
      try {
        throw new Error("NETWORK_ERROR");
      } catch (e) {
        throw e;
      }
    }, []);

    return <div></div>;
}

Pojasnilo:

• Objekt errorMap shranjuje informacije o napakah, vključno s sporočili in zastavicami za ponovni poskus, na podlagi vrst ali kod napak.
• Funkcija handleCustomError pridobi podrobnosti o napaki iz errorMap na podlagi sporočila o napaki in vrne privzete vrednosti, če ni najdena nobena specifična koda.
• Komponenta MyErrorBoundary uporablja handleCustomError, da dobi ustrezno sporočilo o napaki iz errorMap.

Najboljše prakse za kategorizacijo napak

• Določite jasne vrste napak: Vzpostavite dosleden nabor vrst ali kod napak za svojo aplikacijo.
• Zagotovite kontekstualne informacije: Vključite ustrezne podrobnosti v objekte napak, da olajšate odpravljanje napak.
• Centralizirajte logiko obravnavanja napak: Uporabite centralizirano preslikavo napak ali priročne funkcije za dosledno upravljanje obravnavanja napak.
• Beležite napake učinkovito: Integrirajte se s storitvami za poročanje o napakah, da spremljate in analizirate napake v produkciji. Priljubljene storitve vključujejo Sentry, Rollbar in Bugsnag.
• Testiranje obravnavanja napak: Napišite enote teste, da preverite, ali vaše Error Boundaries pravilno obravnavajo različne vrste napak.
• Upoštevajte uporabniško izkušnjo: Prikažite informativna in uporabniku prijazna sporočila o napakah, ki uporabnike usmerjajo k rešitvi. Izogibajte se tehničnemu žargonu.
• Spremljajte stopnje napak: Sledite pogostosti različnih vrst napak, da prepoznate ponavljajoče se težave in določite prioriteto popravkov.
• Internationalizacija (i18n): Ko uporabniku predstavljate sporočila o napakah, se prepričajte, da so vaša sporočila pravilno internationalizirana, da podpirajo različne jezike in kulture. Uporabite knjižnice, kot je i18next ali React-ov Context API, za upravljanje prevodov.
• Dostopnost (a11y): Prepričajte se, da so vaša sporočila o napakah dostopna uporabnikom s posebnimi potrebami. Uporabite atribute ARIA, da zagotovite dodaten kontekst bralnikom zaslona.
• Varnost: Bodite previdni, katere informacije prikazujete v sporočilih o napakah, zlasti v produkcijskih okoljih. Izogibajte se razkrivanju občutljivih podatkov, ki bi jih lahko napadalci izkoristili. Na primer, ne prikazujte surovih sledi skladov končnim uporabnikom.

Primer scenarija: Obravnavanje API napak v aplikaciji e-trgovine

Razmislite o aplikaciji e-trgovine, ki pridobiva informacije o izdelkih iz API-ja. Potencialni scenariji napak vključujejo:

• Omrežne napake: Strežnik API ni na voljo ali pa je uporabnikova internetna povezava prekinjena.
• Napake pri preverjanju pristnosti: Uporabnikov žeton za preverjanje pristnosti ni veljaven ali je potekel.
• Napake »Vir ni najden«: Zahtevani izdelek ne obstaja.
• Napake strežnika: Strežnik API naleti na notranjo napako.

Z uporabo Error Boundaries in kategorizacije napak lahko aplikacija te scenarije obravnava graciozno:

// Primer (poenostavljeno)
async function fetchProduct(productId) {
  try {
    const response = await fetch(`/api/products/${productId}`);
    if (!response.ok) {
      if (response.status === 404) {
        throw new Error("PRODUCT_NOT_FOUND");
      } else if (response.status === 401 || response.status === 403) {
        throw new Error("AUTHENTICATION_ERROR");
      } else {
        throw new Error("SERVER_ERROR");
      }
    }
    return await response.json();
  } catch (error) {
    if (error instanceof TypeError && error.message === "Failed to fetch") {
      throw new Error("NETWORK_ERROR");
    }
    throw error;
  }
}

class ProductErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, errorDetails: null, errorInfo: null };
  }

  static getDerivedStateFromError(error) {
    const errorDetails = handleCustomError(error.message); // Uporabite errorMap, kot je prikazano prej
    return { hasError: true, errorDetails: errorDetails };
  }

  componentDidCatch(error, errorInfo) {
    console.error("Ujeta napaka:", error, errorInfo);
    this.setState({errorInfo: errorInfo});
  }

  render() {
    if (this.state.hasError) {
      const { message, retry } = this.state.errorDetails;
      return (
        <div>
          <h2>Napaka!</h2>
          <p>{message}</p>
          {retry && <button onClick={() => window.location.reload()}>Poskusi znova</button>}
        </div>
      );
    }

    return this.props.children;
  }
}

Pojasnilo:

• Funkcija fetchProduct preveri kodo statusa odgovora API-ja in vrže specifične vrste napak na podlagi statusa.
• Komponenta ProductErrorBoundary ujame te napake in prikaže ustrezna sporočila o napakah.
• Za omrežne napake in napake strežnika se prikaže gumb "Poskusi znova", ki uporabniku omogoča, da ponovno poskusi zahtevo.
• Za napake pri preverjanju pristnosti se lahko uporabnik preusmeri na stran za prijavo.
• Za napake »vir ni najden« se prikaže sporočilo, ki označuje, da izdelek ne obstaja.

Zaključek

Kategorizacija napak znotraj React Error Boundaries je bistvena za gradnjo odpornih, uporabniku prijaznih aplikacij. Z uporabo tehnik, kot so instanceof preverjanja, kode napak in centralizirana preslikava napak, lahko učinkovito obravnavate različne scenarije napak in zagotovite boljšo uporabniško izkušnjo. Ne pozabite upoštevati najboljših praks za obravnavanje napak, beleženje in testiranje, da zagotovite, da vaša aplikacija graciozno obravnava nepričakovane situacije.

Z implementacijo teh strategij lahko znatno izboljšate stabilnost in vzdržljivost svojih React aplikacij, ter svojim uporabnikom zagotovite bolj gladko in zanesljivo izkušnjo, ne glede na njihovo lokacijo ali ozadje.

Dodatni viri:

• Dokumentacija React Error Boundaries
• Sentryjev vodnik po React 16 Error Boundaries
• Vodnik za React Error Boundary Robina Wierucha